import React, { Component } from 'react'
import { ScrollView } from 'react-native'
import { Picker, List, WhiteSpace, DatePicker } from 'antd-mobile'
import uuid from 'uuid'
import moment from 'moment'

const travelType = [
  {
    value: 'ABROAD_TRAVEL',
    label: '出境游'
  },
  {
    value: 'CHURCHY_TRAVEL',
    label: '国内游'
  },
  {
    value: 'GANG_AO_TRAEL',
    label: '港澳游'
  }
]

const district = [
  {
    label: '河南省',
    value: '河南省',
    children: [
      {
        label: '南阳市',
        value: '南阳市',
        children: [
          {
            label: '卧龙区',
            value: '卧龙区'
          }
        ]
      }
    ]
  }
]

const Travels = [
  {
    provice: '河南省',
    city: '南阳市',
    district: '卧龙区',
    children: [
      {
        label: '卧龙岗-野云巷',
        value: '卧龙岗-野云巷'
      },
      {
        label: '卧龙岗-诸葛草庐',
        value: '卧龙岗-诸葛草庐'
      },
      {
        label: '卧龙岗-万古云霄',
        value: '卧龙岗-万古云霄'
      },
      {
        label: '卧龙岗-三顾祠',
        value: '卧龙岗-三顾祠'
      },
      {
        label: '卧龙岗-古柏亭',
        value: '卧龙岗-古柏亭'
      },
      {
        label: '卧龙岗-三顾堂',
        value: '卧龙岗-三顾堂'
      }
    ]
  }
]

class FirstStep extends Component {
  state = {
    travelType: null,
    startDate: null,
    endDate: null,
    area: [],
    travels: null,
    attraction: null
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.upload.uploading) {
      this.setState({
        travelType: null,
        startDate: null,
        endDate: null,
        area: [],
        travels: null,
        attraction: null
      })
    }
  }

  selectType = (value) => {
    this.setState({
      travelType: value
    })

    this.props.dispatch({
      type: 'upload/firstStep',
      payload: {
        travelType: value
      }
    })
  }
  selectAttraction = (value) => {
    this.setState({
      attraction: value
    })
    this.props.dispatch({
      type: 'upload/firstStep',
      payload: {
        attraction: value
      }
    })
  }

  selectArea = (value) => {
    if (value.length === 3) {
      const currentAttraction = Travels.map((attrac) => {
        if (value[0] === attrac.provice &&
          value[1] === attrac.city &&
          value[2] === attrac.district) {
          return attrac.children
        }
        return null
      })
      this.setState({
        travels: currentAttraction[0]
      })
    }
    this.setState({
      area: value
    })
    this.props.dispatch({
      type: 'upload/firstStep',
      payload: {
        area: value
      }
    })
  }

  render() {
    const { dispatch, onChange } = this.props
    console.log('test first step', this.props)
    return (
      <ScrollView>
        <WhiteSpace size="lg" />
        <List>
          <Picker
            extra="请选择(可选)"
            data={travelType}
            cols={1}
            key={uuid()}
            title="旅游类型"
            value={this.state.travelType}
            onOk={this.selectType}
          >
            <List.Item arrow="horizontal">旅游类型:</List.Item>
          </Picker>
        </List>
        <WhiteSpace size="lg" />
        <List>
          <DatePicker
            mode="date"
            key={uuid()}
            title="开始时间"
            extra="开始时间"
            value={this.state.startDate}
            onChange={(startDate) => {
              this.setState({ startDate });
              dispatch({
              type: 'upload/firstStep',
              payload: {
                startTime: moment(startDate).format('YYYY/MM/DD')
                }
              })
            }}
          >
            <List.Item arrow="horizontal">开始时间</List.Item>
          </DatePicker>
          <DatePicker
            mode="date"
            title="结束时间"
            extra="结束时间"
            key={uuid()}
            value={this.state.endDate}
            onChange={(endDate) => {
              this.setState({ endDate });
              dispatch({
              type: 'upload/firstStep',
                payload: {
                  endTime: moment(endDate).format('YYYY/MM/DD')
                }
              })
            }}
          >
            <List.Item arrow="horizontal">结束时间</List.Item>
          </DatePicker>
        </List>
        <WhiteSpace size="lg" />
        <List>
          <Picker
            extra="请选择(可选)"
            data={district}
            title="旅游省份"
            key={uuid()}
            cols={3}
            value={this.state.area}
            onOk={this.selectArea}
          >
            <List.Item arrow="horizontal">旅游省份:</List.Item>
          </Picker>
          <Picker
            extra="请选择(可选)"
            data={this.state.travels}
            title="旅游景点"
            cols={1}
            key={uuid()}
            value={this.state.attraction}
            onOk={this.selectAttraction}
          >
            <List.Item arrow="horizontal">旅游景点:</List.Item>
          </Picker>
        </List>
      </ScrollView>
    )
  }
}

export default FirstStep
